<template>
  <div class="login-page">
    <div class="login-box">
      <h1>登录</h1>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="'密\xa0\xa0\xa0码'" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captchacode">

          <div class="captcha-box">
            <el-input type ="number" v-model.number="ruleForm.captchacode"  placeholder="请输入验证码"></el-input>
            <img height="40" :src="captchaSrc" @click="getCaptchacdoe">

          </div>

        </el-form-item>
        <el-form-item id="login-btn-box">
          <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {validateUserName} from '../../utils/Validate.js'




import {GetCaptCodeApi,LoginApi} from '../../request/api'



export default {
  data() {
    return {
      ruleForm: {
        username: 'admin',
        password: 'admin123',
        captchacode: '',
      },
      rules: {
        username: [
          {
            required: true, // 必填
            message: "用户名不能为空",  //没有填用户名时得提示
            trigger: "blur"  // 触发时机 :失去焦点
          },
          // 自定义验证器
          {validator: validateUserName, trigger: 'blur'}


        ],
        password: [
          {
            required: true, // 必填
            message: "密码不能为空",  //没有填用户名时得提示
            trigger: "blur"  // 触发时机
          }
        ],
        captchacode: [
          {
            required: true, // 必填
            message: "验证码不能为空",  //没有填用户名时得提示
            trigger: "blur"  // 触发时机
          },
          // {pattern: /^[0-9]{6}$/, message: '验证码必须为6位数字', trigger: 'blur'}

        ]
      },
      // 图片验证码路径
      captchaSrc: ""

    }
  },
  created() {
    // this.captchaSrc = "data:image/gif;base64,"+generateBase4String();
    // 获取验证码
    this.getCaptchacdoe();
  },
  methods: {
    submitForm: function (formName) {
      // validate方法会调用写的自定义校验器
      this.$refs[formName].validate((valid) => {
        // 校验通过
        if (valid) {
          // 发起登录请求
          LoginApi({
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            code: this.ruleForm.captchacode,
            uuid: localStorage.getItem("edb-captcha-uuid")
          }).then(res => {
            // 登录不成功，刷新验证码
            if(!res){
              this.getCaptchacdoe();
              return;
            }
            /**
             * 登录成功
             * 1.清除UUID
             * 2.保存TOken
             * 3.跳转首页
             */
            this.$message({
              message: "登录成功！",
              type: 'success'
            });
            //清除uuid
            localStorage.removeItem("edb-captcha-uuid");
            // 保存token
            localStorage.setItem("edb-authorization-token",res.token);
            // 跳转首页
            this.$router.push("/");

          })
        } else {
          this.$message.error('请输入正确的信息在提交');
          return false;
        }
      });
    },
    // 获取验证吗
    /*    getCaptchacdoe(){
          // this.captchaSrc = "data:image/gif;base64,"+generateBase4String();

          // 实际调用后端验证码接口写法
          GetCaptCodeApi().then(res=>{
            if(res.code == 200){
              // 展示验证码图片
              this.captchaSrc = "data:image/gif;base64,"+res.img ;
              // 保存后端返回的UUID，方便登录时判断验证码是否过期
              localStorage.setItem('edb-captcha-uuid', res.uuid);
            }else{
              this.$message.error(res.msg);
            }
          })
        }*/

    //将获取验证码改成async + await 的形式
    async getCaptchacdoe (){
      // 实际调用后端验证码接口写法
      let res = await GetCaptCodeApi()

      if(!res) return;
      // 展示验证码图片
      this.captchaSrc = "data:image/gif;base64,"+res.img ;
      // 保存后端返回的UUID，方便登录时判断验证码是否过期
      localStorage.setItem('edb-captcha-uuid', res.uuid);


    }



  }
}
</script>

<style scoped>

.login-page {
  width: 100%;
  height: 100%;
  /*设置背景图片并居中*/
  background: url(../../assets/images/bgpg.jpg) center top no-repeat;
  position: relative;

.login-box {
  width: 400px;
  height: 300px;
  /*设置背景颜色为白色*/
  background-color: #ffffff;
  /*设置相对位置*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-top: 20px;
  padding-right: 40px;
  /*圆角*/
  border-radius: 20px;

h1 {
  text-align: center;
  margin-bottom: 20px;
  padding-left: 20px;
}

.captcha-box {
  /*弹性布局*/
  display: flex;

img {
  margin-left: 20px;
}

}

.login-btn {
  width: 100%;
}

/*样式覆盖的写法*/
::v-deep#login-btn-box .el-form-item__content {
  margin-left: 40px !important;
}

}
}
</style>
